<template>
  <el-dialog title="选择试题" width="70%" :visible.sync="showDialog" v-show="showDialog" @close="close">
    <el-form :model="queryData" ref="form">
      <el-row style="margin-bottom:10px">
        <el-col :span="6">
          <el-select size="small" v-model="queryData.subject_id" placeholder="请选择学科" clearable>
            <el-option v-for="item in treeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="queryData.directory_id" placeholder="请选择目录" clearable>
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
            <el-option :value="1">11</el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="queryData.tag_id" placeholder="请选择标签" clearable>
            <el-option v-for="item in treeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="queryData.tag_id" :placeholder="qsCate" disabled>
            <el-option :value="1">11</el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10px">
        <el-col :span="6">
          <el-select size="small" v-model="queryData.tag_id" placeholder="审核通过" disabled>
            <el-option :value="1">11</el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="queryData.tag_id" placeholder="上架" disabled>
            <el-option :value="1">11</el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input
            style="width:205px"
            size="small"
            placeholder="请输入创建者"
            v-model="queryData.create_name"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="queryData.difficulty" placeholder="请选择难度" clearable>
            <el-option label="简单" :value="1"></el-option>
            <el-option label="中等" :value="2"></el-option>
            <el-option label="较难" :value="3"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10px">
        <el-col :span="6">
          <el-select size="small" v-model="queryData.difficulty" placeholder="请选择是否真题" clearable>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            style="width:260px"
          ></el-date-picker>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button size="small" type="primary">查询</el-button>
          <el-button size="small">重置</el-button>
          <!-- <el-button size="small" type="warning" icon="el-icon-folder-remove"></el-button> -->
          <el-button size="small" type="warning" icon="el-icon-folder-add" @click="isAdd=!isAdd"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格区域 -->
    <!-- 减 -->

    <el-table
      border
      :data="questionList"
      @selection-change="handleSelectionChange"
      :row-key="getRowKey"
      ref="table"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>

      <el-table-column label="选题信息">
        <!-- -------- -->
        <template slot-scope="{row}">
          <!-- 减 -->

          <div v-show="isAdd">
            <el-row type="flex" align="middle">
              <el-col :span="2">
                <span class="tag2">ID：{{row.id}}</span>
              </el-col>
              <el-col :span="22">
                <span class="tag2">题干信息：</span>
                <el-link
                  :underline="false"
                  type="primary"
                  v-html="row.question"
                  @click="qsPreviewFn(row.id)"
                ></el-link>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle">
              <el-col :span="5">
                <span class="tag2">归属学科：</span>
                {{row.subject_name}}
              </el-col>
              <el-col :span="5">
                <span class="tag2">归属目录：</span>
                {{row.directory_name}}
              </el-col>
              <el-col :span="6">
                <span class="tag2">标签信息：</span>
                {{row.tag_info[0]}}
              </el-col>
              <el-col :span="4">
                <span class="tag2">发布状态：</span>
                <el-tag type="success" size="small">上架</el-tag>
              </el-col>
              <el-col :span="4">
                <span class="tag2">发布时间：</span>
                {{row.check_time | formatTime}}
              </el-col>
            </el-row>
          </div>
          <!-- 加 -->
          <div v-show="!isAdd">
            <el-row type="flex" align="middle" style="line-height:30px">
              <el-col :span="2">
                <span class="tag2">ID：{{row.id}}</span>
              </el-col>
              <el-col :span="22">
                <span class="tag2">题干信息：</span>
                <el-link
                  :underline="false"
                  type="primary"
                  v-html="row.question"
                  @click="qsPreviewFn(row.id)"
                ></el-link>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle" style="line-height:30px">
              <el-col :span="10">
                <span class="tag2">试题编号：</span>
                {{row.quest_num}}
              </el-col>
              <el-col :span="4">
                <span class="tag2">试题类型：</span>
                {{row.quest_type===1?'选择题':row.quest_type===2?"多选题":row.quest_type===3?'判断题':'简答题'}}
              </el-col>
              <el-col :span="5">
                <span class="tag2">归属学科：</span>
                {{row.subject_name}}
              </el-col>
              <el-col :span="5">
                <span class="tag2">归属目录：</span>
                {{row.directory_name}}
              </el-col>
            </el-row>
            <el-row type="flex" align="middle" style="line-height:30px">
              <el-col :span="10">
                <span class="tag2">标题信息：</span>
                {{row.tag_info[0]}}
                <!-- {{info}} -->
              </el-col>
              <el-col :span="4">
                <span class="tag2">发布状态：</span>

                <el-tag type="success" size="small">上架</el-tag>
              </el-col>
              <el-col :span="5">
                <span class="tag2">审核人：</span>
                {{row.check_username}}
              </el-col>
              <el-col :span="5">
                <span class="tag2">审核状态：</span>
                <el-tag type="success" size="small">通过</el-tag>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle" style="line-height:30px">
              <el-col :span="10">
                <span class="tag2">审核意见：</span>
                {{row.check_remarks}}
              </el-col>
              <el-col :span="4">
                <span class="tag2">创建人：</span>
                {{row.create_name}}
              </el-col>
              <el-col :span="5">
                <span class="tag2">难度系数：</span>
                {{row.difficulty===1?'简单':row.difficulty===2?"中等":"困难"}}
              </el-col>
              <el-col :span="5">
                <span class="tag2">发布时间：</span>
                {{row.created_at | formatTime}}
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 减 -->
    <!-- 加 -->

    <!-- 加 -->

    <!-- 分页组件 -->
    <el-row type="flex" justify="center" style="margin-top:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[3,5,10]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top:20px">
      <el-button size="small" type="primary" @click="btnOK">确定</el-button>
      <el-button size="small">取消</el-button>
    </el-row>
  </el-dialog>

  <!-- -------- -->
</template>

<script>
import { chooseQuestionApi, getSubjectListApi } from '@/api/paper'
export default {
  name: 'ChooseQustion',
  data() {
    return {
      checkList: [],
      showDialog: false,
      queryData: {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: 0,
        is_true_question: '',
        show_state: 1,
        check_state: 2,
        create_name: '',
        create_time: '',
      },
      total: 0,
      treeList: [],
      questionList: [],
      isAdd: true, //加或是减
      qsCate: '',
      chooseQuestionList: [], //选的题目集合
      directoryList: [], //归属
    }
  },
  created() {},
  mounted() {
    this.chooseQuestionList = this.chooseQuestionList
  },
  methods: {
    getRowKey(row) {
      return row.id
    },
    async initData() {
      let { list, limit, total } = await chooseQuestionApi(this.queryData)
      this.questionList = list
      this.queryData.limit = limit
      this.total = total
      this.treeList = await getSubjectListApi()

      // ------
      this.qsCate =
        this.queryData.quest_type === 1
          ? '选择题'
          : this.queryData.quest_type === 2
          ? '多选题'
          : this.queryData.quest_type === 3
          ? '判断题'
          : '简答题'
    },
    // 分页逻辑
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.queryData.limit = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.queryData.page = val
      this.initData()
    },
    close() {
      this.queryData = {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: 0,
        is_true_question: '',
        show_state: 1,
        check_state: 2,
        create_name: '',
        create_time: '',
      }
    },

    btnOK() {
      this.$emit('getQsList', this.chooseQuestionList)
      this.$emit('getLength')
      this.showDialog = false
    },
    //归属目录
    changeHandler(val) {
      this.treeList.forEach((item) => {
        if (item.id === val) {
          this.directoryList = item.children
        }
      })
    },
    // 表头复选框事件
    handleSelectionChange(val) {
      // console.log(val)
      this.chooseQuestionList = val
    },
  },
}
</script>

<style>
</style>